<template>
    <view class="paging-container">
        <!-- Search box -->
        <view class="search-box">
            <uni-search-bar 
                placeholder="请输入搜索内容" 
                @confirm="handleSearch"
                @input="handleInput"
                v-model="searchKeyword"
            />
        </view>
        
  <!--      <z-paging 
            ref="paging" 
            v-model="dataList" 
            @query="queryList" 
            :default-page-size="20"
            :fixed="true" 
            :auto-height="true"
			class="z-paging"
			style="top:120px"
        >
            <uni-list border-full v-for="(item,index) in dataList" :key="index" > 
                <uni-list-item clickable :title="item.username" note="列表描述信息" rightText="右侧文字" @click="handleItemClick(item, index)" />
            </uni-list>
        </z-paging> -->
		<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
					:direction="direction"  />
    </view>

</template>

<script>
    import { page } from "@/api/users/users.js"
    export default {
        data() {
            return {
                dataList: [],
                searchKeyword: '', // 搜索关键词
                searchTimer: null   // 搜索防抖定时器
            };
        },
        methods: {
			 handleItemClick(item, index) {
			                console.log('点击了项目:', item);
			                console.log('项目索引:', index);
			                
			                // 这里可以添加跳转逻辑或其他操作
			                uni.navigateTo({
			                    url: '/pages/detail/detail?id=' + item.id
			                    // 根据你的实际项目结构调整路由
			                });
			                
			                // 或者显示一个弹窗
			                // uni.showToast({
			                //     title: '点击了: ' + item.username,
			                //     icon: 'none'
			                // });
			            },
            queryList(pageNo, pageSize) {
                // 添加搜索参数
                const params = {
                    pageNo,
                    pageSize,
                    keyword: this.searchKeyword
                };
                
                page(params).then(res => {
                    console.log('res.list',res)
                    this.$refs.paging.complete(res.data.list,res.data.total);
                }).catch(res => {
                    this.$refs.paging.complete(false);
                })
            },
            
            // 搜索确认
            handleSearch() {
                this.$refs.paging.reload();
            },
            
            // 输入时实时搜索（带防抖）
            handleInput() {
                if (this.searchTimer) {
                    clearTimeout(this.searchTimer);
                }
                this.searchTimer = setTimeout(() => {
                    this.$refs.paging.reload();
                }, 500);
            }
        },
    };
</script>

<style>
      .search-box {
            padding: 10px;
            background-color: #ffffff;
        }
        
        .paging-container {
            display: flex;
            flex-direction: column;
            height: 100%;
        }
    
 
</style>